<%@ page contentType="text/html;charset=UTF-8" %>
<%@include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@include file="/WEB-INF/views/include/top.jsp" %>
    <title>横幅设置</title>
    
<style>
	.uploadZone {
		margin-bottom: 20px;
	}
	img{
	    height: 200px;  
	    width: auto;  
	    left:50%;  
	    position: relative;  
	    -webkit-transform: translateX(-50%);  
	    -ms-transform: translateX(-50%);  
	    -moz-transform: translateX(-50%); 
	}
	.phoneZone {
		border: 1px solid #e0e0e0;
/* 		margin:100px auto;   */
/* 	    width: 220px;   */
	    height: 220px;  
	    overflow: hidden;  
	    border: 1px solid cornflowerblue;  
	    position: relative;  
	}
</style>

<link rel="stylesheet" type="text/css" href="${ctxAssets}/css/lib/uploadify.css" />
<script type="text/javascript" src="${ctxAssets}/js/lib/jquery-uploadify/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="${ctxAssets}/js/lib/jquery-uploadify/swfobject.js"></script>
<script type="text/javascript" src="${ctxAssets}/js/lib/jquery-uploadify/jquery.uploadify.v2.1.0.js"></script>

</head>
<body>
<div class="rightBody">
    <div class="SetUpBody">
        <div class="index-common-title bottom-title">
            <div class="index-common-title-left bottom-left"></div>
            <div class="index-common-title-text bottom-text">横幅设置</div>
        </div>
        <div class="uploadZone clearfix">
            <div class="col-sm-12 ct-col1">
               	<table>
					<tr>
						<td><label><input multiple="true" type="file" name="uploadify" id="uploadify" /></label>&nbsp;&nbsp;</td>
						<td><div id="fileQueue"></div></td>
					</tr>
				</table>
            </div>
        </div>
 		<div class="row">
	        <div class="col-sm-12 ">
	        	<div class="col-sm-4">
					<select class="form-control" id="classify">
						<c:forEach items="${classifyDtos}" var="dto">
		        			<option value="${dto.id}">${dto.name}</option>
						</c:forEach>
					</select>
				</div>
				<div class="col-sm-8">
					<input id="save" type="button" class="btn" value="保存"/>
				</div>
	        </div>
 		</div>  
<br/><br/>
  <div class="row">
        <div class="col-sm-12 " id="banner_img">
			<c:forEach items="${imgDtos}" var="dto">
        		<div class="phoneZone col-sm-3">
        			<img alt="" src="${ctx }/${dto.imgPaths}">
        			<div align="center"><input type="checkbox" name="imgs" value="${dto.id}"/></div>
        		</div>
			</c:forEach>
        </div>
 </div>   
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
	var webRoot = G_WEB_ROOT;
	  var urls = {
		        getClassifyImgs: webRoot + "/sys/banner/getClassifyImgs.do",
		        saveUrl: webRoot + "/sys/banner/saveClassifyImgs.do"
		    };
    $("#uploadify").uploadify({
    	 'scriptData':{'type': 1},	//横幅
         'uploader'	: webRoot +'/assets/plugin/uploadify/uploadify.swf',
         'script'	: webRoot +'/common/uploadify',	//上传后台
//          'cancelImg': webRoot +'/assets/plugin/uploadify/uploadify-cancel.png',
         'queueID'	: 'fileQueue',
         'multi' :true,
         'auto': true,
         'buttonText': 'select',
         'simUploadLimit' : 1,
         'queueSizeLimit' : 10,
//          'removeCompleted': true,//          3.x
         'fileExt': '*.java;*.jpg;*.gif;*.jpeg;*.png;*.bmp;*.zip;*.rar;*.7z',
         onComplete: function(event, queueID, fileObj, response, data) {
             //转换为json对象
             var dataObj = eval("("+response+")");
            // $("#uploadify"+queueID).attr("value",dataObj.filePath);
//              $("#uploadify"+queueID).prepend("<input class='form-control-radio' name='pri_img' value='"+dataObj.filePath+"'  type='radio'/>")
             var div=$('<div class="phoneZone col-sm-3 "></div>');
             var path=webRoot+"/"+dataObj.filePath;
             var img=$(' <img alt="" src="'+path+'">');
             $(div).append(img);
             $(div).append($('<div align="center"><input type="checkbox" name="imgs" value="'+dataObj.id+'"/></div>'));
             
             $("#banner_img").append(div)
//              return true;
         },
////          3.x
//          onUploadSuccess : function(file, data, response){
//         	 console.log(file, data, response);
//          },
         onSelect:function(){
         },
         onError: function(event, queueID, fileObj) {
             alert("文件:" + fileObj.name + "上传失败");
         }
     });
    
//     setInterval("refresh()",2000);
//     function refresh(){
//     	 window.location.href = webRoot+'/sys/bannerView';
//     }
    
    $("#classify").change(function(){
    	var id=$("#classify").val();
    	if(id==null||id==""){
    		return;
    	}
    	$('input[name="imgs"]').attr("checked",false);
    	$.ajax({
            url: urls.getClassifyImgs,
            data : {
            	classifyId : id
     		},
            type: 'post',
            async: false,
            success: function(data) {
            	if(data!=null){
            		  var dataObj = eval(""+data+"");
            		$.each($('input[name="imgs"]'),function(){
            			var imgId=$(this).val();
    					for(var i=0;i<dataObj.length;i++){
    						if(dataObj[i]==imgId){
    							$(this).attr("checked",true);
    							break;
    						}
    					}
            		
    				})
            	}
            }
        });
    });
  	$(document).ready(function(){
  		 $("#classify").change();
  	});
   
    
    $("#save").click(function () {
			var id = $("#classify").val(); 
			if (id == null || id == "") { alert("请选择类型"); return; } 
			var imgs = []; 
			$.each($('input[name="imgs"]'), function (i, o) {
				if ($(this).attr("checked")) { 
					imgs[imgs.length] = $(this).val(); 
				}
			});
			if (imgs.length == 0) { alert("请选择图片"); return; } 
			var data = { id: id, imgs: imgs } 
			// console.log(data);
			$.ajax({ 
				url: urls.saveUrl, 
				type: 'post', 
				data: data, 
				success: function (data) {
					if (data == "true" || data == true) {
						 alert('成功');
					} else { 
						alert('失败'); 
					}
				}
			});
		}
	);
    function notifyInfo(msg, type) {
     	if(type){
     		alert('成功');
     	}else{
     		alert('失败');
     	}
     }
});
</script>

</body>
</html>